<template>
	<div class="clearfix" id="zhuce_wrap">
		<h2 class="title">
			<img src="./lg.png" alt="" />
		</h2>
		<div class="content">
			<div id="zhuce">
				<div class="aaa">
					<span>请输入用户名：</span>
					<el-input
						placeholder="用户名"
						name="username"
						v-model.trim="username"
						clearable
					>
					</el-input>
				</div>
				<div class="aaa">
					<span>请输入姓名：</span>
					<el-input
						placeholder="姓名"
						name="realname"
						v-model.trim="realname"
						clearable
					>
					</el-input>
				</div>
				<div class="aaa">
					<span>请输入学号：</span>
					<el-input
						placeholder="学号"
						oninput="value=value.replace(/[^\d]/g, '')"
						maxlength="12"
						name="student_num"
						v-model.trim="student_num"
						clearable
					>
					</el-input>
				</div>
				<div class="aaa">
					<span>请输入密码：</span>
					<el-input
						placeholder="密码"
						name="password"
						v-model.trim="password"
						show-password
					></el-input>
				</div>
				<p class="zhuce--btn">
					<button id="zhuceBtn" @click="zhuce">注册</button>
				</p>
				<p class="return--btn">
					<button id="return" @click="fanhui">返回</button>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import baseUrl from "../../utils/baseURL";
	export default {
		data() {
			return {
				realname: "",
				student_num: "",
				username: "",
				password: "",
			};
		},
		methods: {
			zhuce() {
				const _this = this;
				axios
					.post(baseUrl + "/sys/register", {
						username: _this.username,
						password: _this.password,
						realname: _this.realname,
						student_num: _this.student_num,
					})
					.then(function (resp) {
						console.log(resp.data);
						if (resp.data.code == 200) {
							_this.$message({
								message: "注册成功，即将跳转至登录页面",
								type: "success",
							});
							setTimeout(() => {
								//需要延迟的代码 :3秒后延迟跳转到首页，可以加提示什么的
								_this.$router.push("/login");
								//延迟时间：3秒
							}, 3000);
						} else if (resp.data.code == 2004) {
							_this.$message({
								message: "注册失败，用户名已存在",
								type: "error",
							});
						} else {
							_this.$message({
								message: "注册失败",
								type: "error",
							});
						}
					});
			},
			fanhui() {
				this.$router.push("/login");
			},
		},
		mounted() {},
	};
</script>

<style scoped lang="scss">
	#zhuce_wrap {
		position: relative;
		background: rgba(64, 64, 194, 0.1);
		> h2 {
			text-align: center;
			padding-top: 40px;
			> img {
				width: 120px;
				height: auto;
			}
		}
		> div {
			height: 0;
			padding-top: 250px;
			> div {
				background: #fff;
				max-width: 479px;
				max-height: 500px;
				padding: 20px 60px;
				position: absolute;
				left: 50%;
				transform: translate(-50%, -50%);
				> div {
					&.aaa {
						margin-bottom: 10px;
					}
					span {
						color: #666;
						display: inline-block;
						font-size: 20px;
					}
				}
				p {
					text-align: right;
					&.zhuce--btn {
						button {
							width: 100%;
							height: 50px;
							font-size: 18px;
							background: rgb(79, 109, 160);
							border: none;
							margin-top: 10px;
							color: #fff;
							border-radius: 6px;
							cursor: pointer;
						}
					}
					&.return--btn {
						button {
							width: 100%;
							height: 50px;
							font-size: 18px;
							background: rgb(233, 233, 233);
							border: none;
							margin-top: 10px;
							color: rgb(79, 109, 160);
							border-radius: 6px;
							cursor: pointer;
						}
					}
					a {
						color: #fff;
						display: inline-block;
						padding: 0 15px;
						font-size: 14px;
					}
				}
			}
		}
	}

	.el-input {
		margin-top: 10px;
		font-size: 16px;
		color: #666;
	}
</style>
